<template>
    <div class="app_container">
        <el-form :inline="true" :model="filter" size="small">
            <el-form-item label="船队状态">
                <el-select v-model="filter.status" placeholder="请选择" clearable style="width:120px;">
                    <el-option label="正常" value="NORMAL"></el-option>
                    <el-option label="待审核" value="PENDING"></el-option>
                    <el-option label="审核驳回" value="REJECTED"></el-option>
                    <el-option label="禁用" value="FORBIDDEN"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="船队名称">
                <el-input placeholder="请输入" v-model="filter.nickName" clearable></el-input>
            </el-form-item>
            <el-form-item label="船长姓名">
                <el-input placeholder="请输入" v-model="filter.realName" clearable></el-input>
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input placeholder="请输入" v-model="filter.contactPhone" clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onFilter">查询</el-button>
            </el-form-item>
        </el-form>

        <!-- 列表 -->
        <el-table border stripe :data="tableData" style="width: 100%">
            <el-table-column prop="id" label="ID" width="60"></el-table-column>
            <el-table-column prop="uid" label="船长ID" width="80"></el-table-column>
            <el-table-column label="船队名称" width="200">
                <template slot-scope="scope">
                    <el-button type="text" @click="goDetail(scope.row.id)" v-if="checkRule(['/umsCaptain/'])">{{ scope.row.nickName }}</el-button>
                    <div v-else>{{ scope.row.nickName }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="shipCount" label="船只数量" width="100"></el-table-column>
            <el-table-column prop="realName" label="真实姓名" width="120"></el-table-column>
            <el-table-column prop="contactPhone" label="联系电话" width="200"></el-table-column>
            <el-table-column prop="applyTime" label="申请时间" width="170"></el-table-column>
            <el-table-column prop="statusText" label="状态" width="100"></el-table-column>
        </el-table>
        <br />

        <el-row type="flex" justify="center">
            <el-pagination background layout="prev, pager, next" :current-page="filter.pageNum" :page-size="filter.pageSize" :total="total" @current-change="changePage"></el-pagination>
        </el-row>

    </div>
</template>

<script>
import { apiCaptainList } from "@/api/captainManage.js";
import { checkPermission } from "@/directive/role/role.js"
export default {
    name: 'index',
    data() {
        return {
            tableData: [],
            total: 0,
            filter: {
                pageNum: 1, pageSize: 10,
                status: '',
                nickName: '',
                realName: '',
                contactPhone: '',
            },
        }
    },
    created() {
        this.getData();
    },
    methods: {
        getData() {
            apiCaptainList(this.filter).then(res => {
                res.data.forEach(item => {
                    switch (item.status) {
                        case 'NORMAL':
                            item.statusText = '正常'
                            break;
                        case 'PENDING':
                            item.statusText = '待审核'
                            break;
                        case 'REJECTED':
                            item.statusText = '审核驳回'
                            break;
                        case 'FORBIDDEN':
                            item.statusText = '禁用'
                            break;
                    }
                })
                this.tableData = res.data;
                this.total = res.total;
                this.filter.pageNum = res.pageNum;
            });
        },
        changePage(page) {
            this.filter.pageNum = page
            this.getData()
        },
        onFilter() {
            this.filter.pageNum = 1
            this.getData()
        },
        checkRule(rule) {
            return checkPermission('', { value: rule })
        },
        goDetail(id) {
            this.$router.push({ path: '/captainManage/detail', query: { id } })
        },
    },
}
</script>

<style></style>